iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 2
0
Modern Web

JavaScript專案學習筆記系列 第 2

JavaScript專案學習筆記 -時鐘 2/30天

  • 分享至 

  • xImage
  •  

**感謝https://javascript30.com/的免費教程

Demo:http://codepen.io/FutureFronterAndy/pen/KNBEJa

今天主要的練習為js中時間的抓取和如何調整對應的css

學習點:

[css]

.hand {
 width:50%;
 height:6px;
 background:black;
 position: absolute;
 top: 50%;
 right: 50%;
 transform-origin: 100%; 
 /* 原地旋轉 */
 transform: rotate(90deg);
 transition: all 0.05s;
 transition-timing-function: cubic-bezier(0, 1.47, 1, 1);
 }

[/css]

transform-origin:以右方為支點做動畫(指針的旋轉要以時鐘正中心為支點旋轉)

transform: rotate(90deg)初始的旋轉角度

transition:動畫速度(影格)http://www.w3schools.com/css/css3_transitions.asp

transition-timing-function: cubic-bezier(0, 1.47, 1, 1);動畫影格,可自行在console中調整

[javascript]
const secondHand=document.querySelector(".second-hand");
 
 const minHand=document.querySelector('.min-hand');
 const hourHand=document.querySelector('.hour-hand');
 function setDate(){
 const now=new Date();
 const second=now.getSeconds();
 const secondDeg=(second/60)*360+90;
 secondHand.style.transform=`rotate(${secondDeg}deg)`;
 
 const min=now.getMinutes();
 const minuteDeg=(min/60)*360+90;
 minHand.style.transform=`rotate(${minuteDeg}deg)`;
 
 const hour=now.getHour();
 const hourDeg=(hour/12)*360+90;
 hourHand.style.transform=`rotate(${hourDeg}deg)`;
 console.log(now);
 }
 setInterval(setDate,1000);
 setDate();
[/javascript]

querySelector:Day1練習過,抓取選擇器
Date():中原標準時間
secondHand.style.transform=rotate(${secondDeg}deg)
改變CSS中secondHand類別的transform裡的角度

**


上一篇
JavaScript專案學習筆記 -鍵盤監聽 1/30天
下一篇
JavaScript專案學習筆記 -以JS操控CSS變數 3/30天
系列文
JavaScript專案學習筆記7
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言